<template>
   <div class="merchantlist">
       <h4>商户列表</h4>
       <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0;overflow:hidden">
                <div style="float:left;width:50%;padding-top:10px;">
                    <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                        手机号：
                        <el-input clearable  @keyup.enter.native="searchMerchant()"
                            placeholder="请输入手机号"
                            v-model="tel" class="filter-input" style="height:32px;">
                        </el-input>
                    </div>
                    <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                        注册时间：
                        <el-date-picker
                                v-model="registerTime"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                style="height:32px;">
                            </el-date-picker>
                    </div>
                        
                </div>
                <div style=" float:left;width:50%;overflow:hidden;"> 
                    <div class="demo-input-suffix" style="margin-right:20px;float:left;margin-top:10px;height:32px;line-height:32px;">
                        <span style="display:inline-block;margin-right:12px;"> 地区：</span>  
                        <area-select :level="2" v-model="selected" :data="$pcaa" style="display:inline-block;height:32px;"></area-select> 
                    </div>
                    <el-button type="primary" style="margin-top:5px;float:right" @click="searchMerchant()">搜索</el-button>
                </div>
       </div>
       <div class="container" style="border-radius: 0 0 5px 5px ">
            <!-- <div style="overflow:hidden">
                <div style="float:left;"></div>
                <el-button type="danger" style="float:right;margin-bottom:20px;">导出(勾选)</el-button>
            </div> -->
            <el-table v-loading="loading" :data="data" border style="width: 100%" ref="multipleTable" stripe>
                 <el-table-column type="index"  width="60" label="序号" align="center" :index="formatterIndex"></el-table-column>
                 <el-table-column prop="merchantName" label="商铺名" width="120" align="center"></el-table-column>
                <el-table-column prop="tel" label="手机号" width="140" align="center"></el-table-column>
                <el-table-column prop="merchantAddress" label="地区" align="center">
                </el-table-column>
                <el-table-column prop="addTime" label="注册时间" align="center" width="240">
                </el-table-column>
                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit( scope.row.id )">详情</el-button>             
                </template>
                </el-table-column>
            </el-table>
             <div class="pagination">
                <!-- <el-pagination  background  layout="prev, pager, next" :total="total" style="text-align:left;"
                               @current-change="getCurrentPage">
                </el-pagination> -->
                <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="getPageNum"
                    :page-sizes="[10, 20, 50,100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
           </div>
      </div>
  </div>  
</template>

<script>
import { AreaSelect } from "vue-area-linkage";
import { merchant_list } from  "@/request/api"
export default {
    data(){
        return {
          loading:true,
          data: [],
          value: '',
          input2:'',
          value7:'',
          tel:'',
          registerTime:[],
          pageSize:10,//每页显示的条数
          pageNum:1,
          total:0,
          selected:[]
        }
    },
    created(){
        this.get_merchant_list()
    },
    methods:{
         
     formatterIndex(row){
        return  this.pageSize*(this.pageNum-1) + 1 + row;
     },
      formatter(row, column){
        return row.address
      },
      searchMerchant(){
          console.log(this.selected);
          this.get_merchant_list();
      },
      handleEdit(id){
          this.$router.push({
              path:`/merchantlist/merchant_detail/${id}`
          })
      },
      //当前页
      getPageNum:function(currentPage){
         this.pageNum = currentPage;
         this.get_merchant_list();
      },
      //显示每页条数
      handleSizeChange(currentPage){
         this.pageSize = currentPage;
         this.get_merchant_list();
      },
      get_merchant_list(){
          merchant_list({
              pageSize:this.pageSize,
              pageNum:this.pageNum,
              tel:this.tel,
              districtId: this.selected[2],
              startAddTime:( this.registerTime  &&  this.registerTime[0])  || '',
              endAddTime:  ( this.registerTime &&  this.registerTime[1] ) || ''
          }).then(res => {
              console.log(res);
              this.loading = false;
              this.total = res.total;
              this.data = res.rows;
          })
      }
    },
    components:{
        AreaSelect
    }
 }
</script>
<style  scoped>
.merchantlist {
        width:100%;
        height: 100%;
}
.merchantlist h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}

</style>